import React from 'react';
import {connect} from 'dva/index';
import {Checkbox, Col, DatePicker, Form, Input, InputNumber, Radio, Row, Tabs} from 'antd';
import SingleDragger from "../common/SingleDragger";
import StreetSelect from '../common/streetSelect';
import {download} from '../../utils/commons';
import Constants from '../../utils/Constants';
import moment from 'moment'

const dateFormat = 'YYYY-MM-DD';
const timeFormat = 'YYYY-MM-DD HH:mm:ss';
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const R = require("ramda");

const labelStyle = {
    lineHeight: 2.5,
    borderTop: '1px solid #d9d9d9',
    borderBottom: '1px solid #d9d9d9',
    borderLeft: '1px solid #d9d9d9',
    width: 50,
    textAlign: 'center'
}

const orderTrailerInfo = Form.create()(class OrderTrailerInfo extends React.Component {
    constructor(props) {
        super(props);
    }

    handleScatteredTowage = () =>{          //导出散货托运单
        let id = R.isNil(this.props.order.odTrailer.id) ? "" : this.props.order.odTrailer.id;
        let url =  apiPath.mc + "/api/file/export/scatteredTowage/" + id;
        let conditions = null;
        download(url, conditions);
    }

    handleExportFCLTowage = () =>{          //导出整柜拖车计划
        let id = R.isNil(this.props.order.odTrailer.id) ? "" : this.props.order.odTrailer.id;
        let url =  apiPath.mc + "/api/file/export/fclTowage/" + id;
        let conditions = null;
        download(url, conditions);
    }                   
    
    handleExportDispatchList = () =>{       //导出整柜派车单
        let id = R.isNil(this.props.order.odTrailer.id) ? "" : this.props.order.odTrailer.id;
        let url =  apiPath.mc + "/api/file/export/dispatchList/" + id;
        let conditions = null;
        download(url, conditions);
    }

    form = {};
    flag = true;
    handleCollectForm = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) {
                this.flag = false;
                return;
            } else {
                this.flag = true;
                let data = R.omit(['area', 'wholeLoadingTime'])(values);                
                data.provinceCode = R.isNil(values.area) ? null : values.area[0];
                data.cityCode = R.isNil(values.area) ? null : values.area[1];
                data.districtCode = R.isNil(values.area) ? null : values.area[2];
                data.streetCode = R.isNil(values.area) ? null : values.area[3];

                let deliveryReceiptData = this.props.order.deliveryReceipt ? this.props.order.deliveryReceipt : {};
                data.loadingTime =  ["1", "3"].includes(deliveryReceiptData.shipping) || deliveryReceiptData.trailerType == "1"  ? (R.isNil(values.wholeLoadingTime) || R.isEmpty(values.wholeLoadingTime) ? "" : values.wholeLoadingTime.format(timeFormat)) : (R.isNil(values.loadingTime) || R.isEmpty(values.loadingTime) ? "" : values.loadingTime.format(timeFormat));
                data.receiptCreatetime = R.isNil(values.receiptCreatetime) || R.isEmpty(values.receiptCreatetime) ? "" : values.receiptCreatetime.format(dateFormat);

                this.form = { ...data };
            }
        })
        return this.flag;
    }

    checkOrderTrailerInfo = () => {
        if (this.handleCollectForm()) {
            return this.form;
        }
    }


    render() {
        const { getFieldDecorator } = this.props.form;
        let dataSource = this.props.order.odTrailer ? this.props.order.odTrailer : {};
        let deliveryReceiptData = this.props.order.deliveryReceipt ? this.props.order.deliveryReceipt : {};
        let formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
        let formItemLayout2 = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };
        let formItemLayout3 = { labelCol: { span: 1 }, wrapperCol: { span: 22 } };

        let area = [];
        R.isNil(dataSource.provinceCode) ? "" : area.push(dataSource.provinceCode);
        R.isNil(dataSource.cityCode) ? "" : area.push(dataSource.cityCode);
        R.isNil(dataSource.districtCode) ? "" : area.push(dataSource.districtCode);
        R.isNil(dataSource.streetCode) ? "" : area.push(dataSource.streetCode);

        let weighBillUrlUrl = dataSource.weighBillUrlUrl ? dataSource.weighBillUrlUrl : undefined;
        let headstockPicUrl = dataSource.headstockPicUrl ? dataSource.headstockPicUrl : undefined;
        let tailstockPicUrl = dataSource.tailstockPicUrl ? dataSource.tailstockPicUrl : undefined;
        let gpsUrl = dataSource.gpsUrl ? dataSource.gpsUrl : undefined;
        let alsoCabinetBillUrl = dataSource.alsoCabinetBillUrl ? dataSource.alsoCabinetBillUrl : undefined;
        let sendCarUrl = dataSource.sendCarUrl ? dataSource.sendCarUrl : undefined;
        let otherUrl = dataSource.otherUrl ? dataSource.otherUrl : undefined;
        let signedReceiptUrl = dataSource.signedReceiptUrl ? dataSource.signedReceiptUrl : undefined;

        const divWithOutBorderBottom = {
            display: 'flex',
            borderRight: '1px solid #e9e9e9',
            borderLeft: '1px solid #e9e9e9',
            borderTop: '1px solid #e9e9e9',
            borderSpacing: 0,
            lineHeight: 3.5,
            textAlign: 'left',
        }

        const columnBreak = {
            display: 'flex',
            borderRight: '1px solid #e9e9e9',
            borderLeft: '1px solid #e9e9e9',
            borderTop: '1px solid #e9e9e9',
            borderSpacing: 0,
            textAlign: 'left',
        }

        return (
            <div>
                <Form>
                    {["1", "3"].includes(deliveryReceiptData.shipping) || deliveryReceiptData.trailerType == "1" ?
                        <div>
                            <Tabs tabPosition={'top'}>
                                <TabPane tab="制定整柜拖车计划" key="1">
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="供应商名称" hasFeedback>
                                                {getFieldDecorator('trailerSupplierName', {
                                                    // rules: [{
                                                    //     required: true, message: '请输入供应商名称',
                                                    // }],
                                                    initialValue: dataSource.trailerSupplierName
                                                })(
                                                    <Input disabled={true} maxLength="100" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="下单时间" hasFeedback>
                                                {getFieldDecorator('receiptCreatetime', {
                                                    // rules: [{
                                                    //     required: true, message: '请选择下单时间'
                                                    // }],
                                                    initialValue: (R.isNil(dataSource.receiptCreatetime) || R.isEmpty(dataSource.receiptCreatetime)) ? undefined : moment(dataSource.receiptCreatetime, dateFormat)
                                                })(
                                                    <DatePicker disabled={true}
                                                        style={{ width: '100%' }}
                                                        showTime={{ format: 'YYYY-MM-DD' }}
                                                        format="YYYY-MM-DD" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="拖车下单人" hasFeedback>
                                                {getFieldDecorator('receiptCreator', {
                                                    // rules: [{
                                                    //     required: true, message: '请输入拖车下单人',
                                                    // }],
                                                    initialValue: dataSource.receiptCreator
                                                })(
                                                    <Input disabled={true} maxLength="100" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="BL(SO)" hasFeedback>
                                                {getFieldDecorator('soNo', {
                                                    // rules: [{
                                                    //     required: true, message: '请输入BL(SO)',
                                                    // }],
                                                    initialValue: dataSource.soNo
                                                })(
                                                    <Input disabled={true} maxLength="50" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="货名">
                                                {getFieldDecorator('productName', {
                                                    // rules: [{
                                                    //     required: true, message: '请输入货名',
                                                    // }],
                                                    initialValue: dataSource.productName
                                                })(
                                                    <Input disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="50" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="重量" hasFeedback>
                                                {getFieldDecorator('weight', {
                                                    rules: [{
                                                        required: true, message: '请输入重量',
                                                    }],
                                                    initialValue: dataSource.weight
                                                })(
                                                    <InputNumber min={0} disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '100%' }} maxLength="18" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={2} style={{ marginLeft: 80 }}>
                                            <span><font size="2">柜型/柜量:</font></span>
                                        </Col>
                                        <Col span={4}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('size20gp', {
                                                    initialValue: dataSource.size20gp
                                                })(
                                                    <InputNumber disabled={true} min={0} maxLength="4" style={{ width: '100%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2}>
                                            <span><font size="2">*20GP</font></span>
                                        </Col>
                                        <Col span={4}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('size40gp', {
                                                    initialValue: dataSource.size40gp    
                                                })(
                                                    <InputNumber disabled={true} min={0} maxLength="4" style={{ width: '100%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2}>
                                            <span><font size="2">*40GP</font></span>
                                        </Col>
                                        <Col span={4}>
                                            <FormItem {...formItemLayout3}>
                                                {getFieldDecorator('size40hq', {
                                                    initialValue: dataSource.size40hq
                                                })(
                                                    <InputNumber disabled={true} min={0} maxLength="4" style={{ width: '100%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={2}>
                                            <span><font size="2">*40HQ</font></span>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="提柜地点">
                                                {getFieldDecorator('raiseCabinetAddress', {
                                                    rules: [{
                                                        required: true, message: '请输入提柜地点',
                                                    }],
                                                    initialValue: dataSource.raiseCabinetAddress
                                                })(
                                                    <Input disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="150" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="还柜地点" hasFeedback>
                                                {getFieldDecorator('alsoCabinetAddress', {
                                                    rules: [{
                                                        required: true, message: '请输入还柜地点',
                                                    }],
                                                    initialValue: dataSource.alsoCabinetAddress
                                                })(
                                                    <Input disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="150" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="装柜地址" hasFeedback>
                                                {getFieldDecorator('area', {
                                                    // rules: [{
                                                    //     required: true, message: '请选择装柜地址',
                                                    // }],
                                                    initialValue: area
                                                })(
                                                    <StreetSelect style={{ width: "100%" }} disabled={true} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="装柜时间" hasFeedback>
                                                {getFieldDecorator('wholeLoadingTime', {
                                                    initialValue: (R.isNil(dataSource.loadingTime) || R.isEmpty(dataSource.loadingTime)) ? undefined : moment(dataSource.loadingTime, timeFormat)                                                                                                                                                                          
                                                })(
                                                    <DatePicker disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled}
                                                                style={{ width: '100%', marginBottom: 5 }} 
                                                                // showTime={{ format: 'YYYY-MM-DD' }}
                                                                // format="YYYY-MM-DD" 
                                                                showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                                                                format="YYYY-MM-DD HH:mm:ss"
                                                    />
                                                )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={24}>
                                            <FormItem {...formItemLayout2} label="装柜详细地址" hasFeedback>
                                                {getFieldDecorator('detailAddress', {
                                                    rules: [{
                                                        required: true, message: '请输入装柜详细地址',
                                                    }],
                                                    initialValue: dataSource.detailAddress
                                                })(
                                                    <Input disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="300" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="装柜联系人" hasFeedback>
                                                {getFieldDecorator('loadingContacts', {
                                                    // rules: [{
                                                    //     required: false, message: '请输入联系人/方式',
                                                    // }],
                                                    initialValue: dataSource.loadingContacts
                                                })(
                                                    <Input disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="50" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="联系方式" hasFeedback>
                                                {getFieldDecorator('loadingTelephone', {
                                                    // rules: [{
                                                    //     required: false, message: '请输入联系人/方式',
                                                    // }],
                                                    initialValue: dataSource.loadingTelephone
                                                })(
                                                    <Input disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="50" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="监装人" hasFeedback>
                                                {getFieldDecorator('checkContacts', {
                                                    rules: [{
                                                        required: false, message: '请输入监装人',
                                                    }],
                                                    initialValue: dataSource.checkContacts
                                                })(
                                                    <Input disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="18" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="拖车费" hasFeedback>
                                                {getFieldDecorator('trailerFee', {
                                                    rules: [{
                                                        required: true, message: '请输入拖车费',
                                                    }],
                                                    initialValue: dataSource.trailerFee
                                                })(
                                                    <InputNumber disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="18" style={{ width: '100%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={24}>
                                            <FormItem {...formItemLayout2} label="特殊要求" hasFeedback>
                                                {getFieldDecorator('requireDesc', {
                                                    rules: [{
                                                        required: true, message: '请输入特殊要求',
                                                    }],
                                                    initialValue: dataSource.requireDesc
                                                })(
                                                    <Input.TextArea disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} maxLength="300" autosize={{ minRows: 2, maxRows: 5 }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    {dataSource.status == "2" || dataSource.status == "3" ? 
                                    <Row>
                                        <Col span={4} style={{ marginLeft: 90, marginBottom: 10 }}>
                                            <a href="#" onClick={this.handleExportFCLTowage.bind(this)}>导出整柜拖车计划</a>
                                        </Col>
                                        {/* <Col span={3} style={{ marginLeft: 10, marginBottom: 10 }}>
                                            <a href="#" onClick={this.handleExportDispatchList.bind(this)}>导出整柜派车单</a>
                                        </Col> */}
                                    </Row>
                                    :""}
                                </TabPane>
                            </Tabs>

                            {dataSource.status == "2" || dataSource.status == "3" ? 
                            <Tabs tabPosition={'top'}>
                                <TabPane tab="整柜拖车凭证" key="1">
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="柜号" hasFeedback>
                                                {getFieldDecorator('cntrNo', {
                                                    rules: [{
                                                        required: true, message: '请输入柜号',
                                                    }],
                                                    initialValue: dataSource.cntrNo
                                                })(
                                                    <Input disabled={dataSource.status == "3" ? true : this.props.disabled} maxLength="300" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="封号" hasFeedback>
                                                {getFieldDecorator('sealNumber', {
                                                    rules: [{
                                                        required: true, message: '请输入封号',
                                                    }],
                                                    initialValue: dataSource.sealNumber
                                                })(
                                                    <Input disabled={dataSource.status == "3" ? true : this.props.disabled} maxLength="50" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="过磅重量" hasFeedback>
                                                {getFieldDecorator('weighWeight', {
                                                    rules: [{
                                                        required: true, message: '请输入过磅重量',
                                                    }],
                                                    initialValue: dataSource.weighWeight
                                                })(
                                                    <InputNumber min={0} disabled={dataSource.status == "3" ? true : this.props.disabled} style={{ width: '100%' }} maxLength="18" />                                                    
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">过磅单</span>} hasFeedback>
                                                <SingleDragger url={weighBillUrlUrl} ref="weighBillUrlUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[0]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">车头照</span>} hasFeedback>
                                                <SingleDragger url={headstockPicUrl} ref="headstockPicUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[1]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">车尾照</span>} hasFeedback>
                                                <SingleDragger url={tailstockPicUrl} ref="tailstockPicUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[2]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">GPS定位</span>} hasFeedback>
                                                <SingleDragger url={gpsUrl} ref="gpsUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[3]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">还柜纸</span>} hasFeedback>
                                                <SingleDragger url={alsoCabinetBillUrl} ref="alsoCabinetBillUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[4]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">派车单</span>} hasFeedback>
                                                <SingleDragger url={sendCarUrl} ref="sendCarUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[5]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">其他材料</span>} hasFeedback>
                                                <SingleDragger url={otherUrl} ref="otherUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[6]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    {dataSource.status == "3" ? 
                                    <Row>
                                        <Col span={4} style={{ marginLeft: 90, marginBottom: 10 }}>
                                            <a href="#" onClick={this.handleExportDispatchList.bind(this)}>导出整柜派车单</a>
                                        </Col>
                                    </Row>
                                    : ""}
                                </TabPane>
                            </Tabs>
                            : ""}
                        </div>
                    : ""}

                    {["2", "4"].includes(deliveryReceiptData.shipping) || ["1", "2", "3"].includes(deliveryReceiptData.airFreight) || deliveryReceiptData.trailerType == "2" ?
                        <div>
                            <Tabs tabPosition={'top'}>
                                <TabPane tab="散货托运单" key="1">
                                    <div style={{ width: '90%', marginLeft: 50 }}>
                                        <div style={{ textAlign: 'center' }}>
                                            <div><span><b><font size="5">托运单</font></b></span></div>
                                            <div style={{ marginTop: 10 }}><span><b><font size="3">广州瀚森乐达供应链管理有限公司</font></b></span></div>
                                        </div>
                                        <div style={{ textAlign: 'left', marginTop: 10, marginBottom: 10 }}>
                                            <div><span>TO: {dataSource.trailerSupplierName}车队</span></div>
                                            <div style={{ marginTop: 10 }}><span>FM: {dataSource.gdUser}/{dataSource.gdTelephone}</span></div>
                                            <div style={{ marginTop: 10 }}><span>下单日期: {dataSource.receiptCreatetime}</span></div>
                                        </div>
                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '17%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>委托送货方</div>
                                            </div>
                                            <div style={{ width: '17%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>广州瀚森乐达</div>
                                            </div>
                                            <div style={{ width: '16%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>联系人</div>
                                            </div>
                                            <div style={{ width: '16%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>{dataSource.gdUser}</div>
                                            </div>
                                            <div style={{ width: '17%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>联系电话</div>
                                            </div>
                                            <div style={{ width: '17%', marginLeft: 10 }}>
                                                <div>{dataSource.gdTelephone}</div>
                                            </div>
                                        </div>

                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 装柜地址 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('detailAddress', {
                                                            initialValue: dataSource.detailAddress
                                                        })(
                                                            // <Select style={{ width: '20%' }} disabled={this.props.disabled}>
                                                            //     <Select.Option value="1">国际中转</Select.Option>
                                                            //     <Select.Option value="2">一关通</Select.Option>
                                                            // </Select>
                                                            <Input maxLength="100" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '90%', marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 联系人 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('loadingContacts', {
                                                            initialValue: dataSource.loadingContacts
                                                        })(
                                                            // <Select style={{ width: '20%' }} disabled={this.props.disabled}>
                                                            //     <Select.Option value="1">国际中转</Select.Option>
                                                            //     <Select.Option value="2">一关通</Select.Option>
                                                            // </Select>
                                                            <Input maxLength="50" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '90%', marginLeft: 12, marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 联系人电话 &nbsp;
                                            <span>
                                                        {getFieldDecorator('loadingTelephone', {
                                                            initialValue: dataSource.loadingTelephone
                                                        })(
                                                            // <Select style={{ width: '20%' }} disabled={this.props.disabled}>
                                                            //     <Select.Option value="1">国际中转</Select.Option>
                                                            //     <Select.Option value="2">一关通</Select.Option>
                                                            // </Select>
                                                            <Input maxLength="20" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '89%', marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 装货时间 &nbsp;&nbsp;
                                                    <span>
                                                        {getFieldDecorator('loadingTime', {
                                                            initialValue: (R.isNil(dataSource.loadingTime) || R.isEmpty(dataSource.loadingTime)) ? undefined : moment(dataSource.loadingTime, timeFormat)                                                            
                                                        })(
                                                            <DatePicker disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled}
                                                                        style={{ width: '90%', marginBottom: 5 }} 
                                                                        // showTime={{ format: 'YYYY-MM-DD' }}
                                                                        // format="YYYY-MM-DD" 
                                                                        showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                                                                        format="YYYY-MM-DD HH:mm:ss"
                                                                        placeholder="请选择有效截止时间" />
                                                        )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '35%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 卸货人公司名称 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('unloadCompany', {
                                                            initialValue: dataSource.unloadCompany
                                                        })(
                                                            <Input maxLength="100" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '62%', marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                            <div style={{ width: '32%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 联系人 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('unloadContacts', {
                                                            initialValue: dataSource.unloadContacts
                                                        })(
                                                            <Input maxLength="100" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '72%', marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                            <div style={{ width: '33%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 联系电话 &nbsp;
                                            <span>
                                                        {getFieldDecorator('unloadTelephone', {
                                                            initialValue: dataSource.unloadTelephone
                                                        })(
                                                            <Input maxLength="20" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '70%', marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 卸货地址 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('unloadAddress', {
                                                            initialValue: dataSource.unloadAddress
                                                        })(
                                                            <Input maxLength="200" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '90%', marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style={Object.assign({}, { lineHeight: 5 }, columnBreak)}>
                                            <div style={{ width: '45%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 货物名称 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('productName', {
                                                            initialValue: dataSource.productName
                                                        })(
                                                            <Input.TextArea maxLength="50" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '80%', marginTop: 5, marginBottom: 5 }} autosize={{ minRows: 5, maxRows: 6 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                            <div style={{ width: '25%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 大约重量 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('probablyWeight', {
                                                            initialValue: dataSource.probablyWeight
                                                        })(
                                                            <InputNumber maxLength="18" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '60%', marginTop: 5, marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                                <div style={{ borderTop: '1px solid #e9e9e9' }}><span style={{ color: 'red' }}>*</span> 大约件数 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('probablyPackagesNum', {
                                                            initialValue: dataSource.probablyPackagesNum
                                                        })(
                                                            <InputNumber maxLength="11" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '60%', marginTop: 5, marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                            <div style={{ width: '30%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 大约方数 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('probablyCube', {
                                                            initialValue: dataSource.probablyCube
                                                        })(
                                                            <InputNumber maxLength="18" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '65%', marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                                <div style={{ borderTop: '1px solid #e9e9e9' }}><span style={{ color: 'red' }}>*</span> 货物包装 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('cargoPackages', {
                                                            initialValue: dataSource.cargoPackages
                                                        })(
                                                            <Input maxLength="15" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '65%', marginTop: 5, marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div style={Object.assign({}, { lineHeight: 5 }, columnBreak)}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>备注 &nbsp;
                                            <span>
                                                        {getFieldDecorator('unloadMemo', {
                                                            initialValue: dataSource.unloadMemo
                                                        })(
                                                            <Input.TextArea maxLength="200" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '92%', marginTop: 5, marginLeft: 22, marginBottom: 5 }} autosize={{ minRows: 3, maxRows: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div style={Object.assign({}, { lineHeight: 4 }, columnBreak)}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><span style={{ color: 'red' }}>*</span> 提货费 &nbsp;&nbsp;
                                            <span>
                                                        {getFieldDecorator('pickUpCharge', {
                                                            initialValue: dataSource.pickUpCharge
                                                        })(
                                                            <InputNumber maxLength="18" disabled={dataSource.status == "2" || dataSource.status == "3" ? true : this.props.disabled} style={{ width: '92%', marginTop: 5, marginBottom: 5 }} />
                                                            )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '100%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div><font size="2.5">托运人须知： 门到门服务，每趟运输太平洋保险公司承保100万，货物价值超过100万需要及时告诉我公司，具体办法根据我公司与保险公司签订的协议处理。</font></div>
                                            </div>
                                        </div>

                                        <div style={divWithOutBorderBottom}>
                                            <div style={{ width: '33%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>托运人签名(盖章)</div>
                                            </div>
                                            <div style={{ width: '33%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>承运人签名(盖章)</div>
                                            </div>
                                            <div style={{ width: '34%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>收货人签名(盖章)</div>
                                            </div>
                                        </div>

                                        <div style={Object.assign({}, { lineHeight: 10, borderBottom: '1px solid #e9e9e9' }, columnBreak)}>
                                            <div style={{ width: '33%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>年 &nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp; 日</div>
                                            </div>
                                            <div style={{ width: '33%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>年 &nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp; 日</div>
                                            </div>
                                            <div style={{ width: '34%', marginLeft: 10, borderRight: '1px solid #e9e9e9' }}>
                                                <div>年 &nbsp;&nbsp;&nbsp; 月 &nbsp;&nbsp;&nbsp; 日</div>
                                            </div>
                                        </div>
                                    </div>
                                    {dataSource.status == "2" || dataSource.status == "3" ? 
                                    <Row>
                                        <Col span={4} style={{ marginLeft: 90,  marginTop: 10, marginBottom: 10 }}>
                                            <a href="#" onClick={this.handleScatteredTowage.bind(this)}>导出散货托运单</a>
                                        </Col>
                                    </Row>
                                    : ""}
                                                                        
                                </TabPane>
                            </Tabs>

                            {dataSource.status == "2" || dataSource.status == "3" ? 
                            <Tabs tabPosition={'top'}>
                                <TabPane tab="散货运输凭证" key="1">
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="司机姓名" hasFeedback>
                                                {getFieldDecorator('driverName', {
                                                    rules: [{
                                                        required: true, message: '请输入司机姓名',
                                                    }],
                                                    initialValue: dataSource.driverName
                                                })(
                                                    <Input disabled={dataSource.status == "3" ? true : this.props.disabled} maxLength="50" />
                                                    )}
                                            </FormItem>
                                        </Col>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="联系电话" hasFeedback>
                                                {getFieldDecorator('driverTelephone', {
                                                    rules: [{
                                                        required: true, message: '请输入联系电话',
                                                    }],
                                                    initialValue: dataSource.driverTelephone
                                                })(
                                                    <Input disabled={dataSource.status == "3" ? true : this.props.disabled} maxLength="20" style={{ width: '100%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label="车牌号码" hasFeedback>
                                                {getFieldDecorator('carNum', {
                                                    rules: [{
                                                        required: true, message: '请输入车牌号码',
                                                    }],
                                                    initialValue: dataSource.carNum
                                                })(
                                                    <Input disabled={dataSource.status == "3" ? true : this.props.disabled} maxLength="20" style={{ width: '100%' }} />
                                                    )}
                                            </FormItem>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={12}>
                                            <FormItem {...formItemLayout} label={<span className="ant-form-item-required">签收单</span>} hasFeedback>
                                                <SingleDragger url={signedReceiptUrl} ref="signedReceiptUrl" dataSource={dataSource} module={Constants.ORDERTRA_MODULES[7]} disabled={dataSource.status == "3" ? true : this.props.disabled} />
                                            </FormItem>
                                        </Col>
                                    </Row>
                                </TabPane>
                            </Tabs>
                            : ""}
                        </div>
                        : ""}
                </Form>
            </div>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.order, order: state.order
    };
}

export default connect(mapStateToProps)(orderTrailerInfo);